<template>
  <div class="top-bar">
    <div class="company-tabs">
      <el-tabs v-model="activeTab" type="card" @tab-click="handleTab">
        <el-tab-pane label="中交公司" name="1"/>
        <el-tab-pane label="交建公司" name="2"/>
        <el-tab-pane label="福星公司" name="3"/>
        <el-tab-pane label="三公司" name="4"/>
        <el-tab-pane label="四公司" name="5"/>
        <el-tab-pane label="五公司" name="6"/>
      </el-tabs>
    </div>
    <div class="user-info">
      欢迎您，管理员 | <a @click="logout">退出</a>
    </div>
  </div>
  <!-- <div id="baiduMap" style="width: 100%; height: 100vh; position: absolute; left:0; top:0; z-index: 1;"></div> -->
</template>

<script>
export default {
  data() {
    return {
      activeTab: '1'
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // handleTab(tab) {
    //   // 切换公司逻辑
    // },
    logout() {
      // 退出登录逻辑
    },
    initMap() {
      // 创建地图实例
      const map = new window.BMap.Map("baiduMap");
      // 设置中心点和缩放级别
      map.centerAndZoom(new window.BMap.Point(118.796877, 32.060255), 7);
      // 启用滚轮缩放
      map.enableScrollWheelZoom(true);
      // 设置为卫星图
      map.setMapType(window.BMAP_SATELLITE_MAP);

      // 隐藏默认控件
      map.removeControl(map.getContainer());

      // 添加自定义标记
      const point1 = new window.BMap.Point(117.285769, 34.204401);
      const marker1 = new window.BMap.Marker(point1, {
        // icon: new window.BMap.Icon(require('https://img.icons8.com/fluency/48/marker.png'), new window.BMap.Size(40, 40))
      });
      map.addOverlay(marker1);

      // 你可以继续添加更多自定义标记
    }
  }
}
</script>

<style scoped>
.top-bar {
  background: linear-gradient(90deg, #0a234a 0%, #133b6e 100%);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  box-shadow: 0 2px 8px #000a;
  padding: 0 32px;
}
.company-tabs ::v-deep .el-tabs__item {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  background: transparent;
}
.company-tabs ::v-deep .el-tabs__item.is-active {
  background: #1e5bb8;
  border-radius: 4px 4px 0 0;
}
.user-info {
  font-size: 16px;
}
.user-info a {
  color: #4ecaff;
  margin-left: 8px;
  text-decoration: underline;
  cursor: pointer;
}
</style>
